<template>
  <el-container class="logManagment_logSearching-setting">
    <el-main>
      <div class="card-list">
        <el-card shadow="never" class="selectCard searchColumn">
          <el-form label-position="right" label-width="6rem">
            <el-row :gutter="40">
              <el-col :span="6">
                <el-form-item label="操作人员：">
                  <el-input />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="操作模块：">
                  <el-select>
                    <el-option label="全部" :value="0" />
                    <el-option label="设置模块" :value="1" />
                    <el-option label="商城模块" :value="2" />
                    <el-option label="商品模块" :value="3" />
                    <el-option label="订单模块" :value="4" />
                    <el-option label="会员模块" :value="5" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="操作时间：">
                  <el-date-picker
                    type="daterange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    value-format="yyyy-MM-dd"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <SearchButton />
          </el-form>
        </el-card>
        <el-card shadow="never" class="tableCard">
          <vxe-table
            ref="xTable"
            border
            resizable
            show-overflow
            highlight-hover-row
            :loading="loading"
            :auto-resize="true"
            :data="tableData"
            width
            max-height="500"
            :print-config="{}"
            header-align="center"
          >
            <vxe-table-column type="seq" width="50" title=" " />
            <vxe-table-column field="person" width="120" title="操作人员" />
            <vxe-table-column field="module" min-width="100" title="操作模块" />
            <vxe-table-column field="function" width="120" title="操作功能" />
            <vxe-table-column field="oper_time" min-width="120" title="操作时间" />
            <vxe-table-column field="ip_address" min-width="100" title="IP地址" />
            <vxe-table-column field="oper_activity" width="200" align="center" slots="default" title="操作内容" />
          </vxe-table>
          <vxe-pager
            :current-page.sync="tableCurrentPage"
            :page-size.sync="pageSize"
            :total="total"
            :layouts="[
              'PrevJump',
              'PrevPage',
              'Number',
              'NextPage',
              'NextJump',
              'FullJump',
              'Total',
            ]"
          />
        </el-card>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import SearchButton from '@/components/SearchButton'
export default {
  components: {
    SearchButton
  },
  data() {
    return {
      title: '蜂网电子商务',
      params: {
        name: ''
      },
      tableData: [
        {
          person: '111',
          module: '会员模块',
          function: '会员查询',
          oper_time: '2021-12-24 11:25',
          ip_address: '10.172.99.100',
          oper_activity: '查询会员查询会员查询会员查询会员查询会员查询会员查询会员',
          id: 1
        }
      ],
      tableCurrentPage: 1,
      pageSize: 20,
      total: 0,
      selectId: '',
      loading: false,
      nowUserId: ''
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style lang="scss">
.logManagment_logSearching-setting {
  .card-list {
    width: 100%;
  }
  .headerIcon {
    width: 40px;
    height: 40px;
  }
}
</style>
